<template>
  <div id="app">
    <input type="button" value="3、$store.commit操作mutations" @click="$store.commit('increment')"/>
    <input type="button" value="4、$store.dispatch操作action" @click="$store.dispatch('_increment')"/>
    <input type="button" value="4.1、$store.dispatch操作action带参" @click="dispatch1"/>

    <br/>
    方法一、直接用挂载在vue的store拿，这种违背vuex的意图（注意如果用了modules，此时要$store.state.模块名.count）
    <br/>
    <!--1、store最初形态测试取值:{{$store.state.count}}-->
    <br/>
    <br/>
    2、分模块时取值:{{$store.state.component001.count}}
    <br/>
    <br/>
    5、通过getters拿（计算属性）:{{$store.getters.myshow}}
    <br/>
    <div>----------------------------------------------------</div>
    方法二、正常状态管理方法，详见步骤
    <br/>
    <input type="button" value="6、mapActions操作action" @click="_increment"/>
    <br/>
    5.1、mapGetters把getters绑定到vue的计算属性并显示:{{show}}
  </div>
</template>

<script>
  import {mapActions, mapGetters} from 'vuex';

  export default {

    /**
     *
     */
    methods: {
      ...mapActions([
        '_increment','_sendmsg'
      ]),
      dispatch1() {
        // this.$store.dispatch('_sendmsg', {mycount : 200})
        this._sendmsg({mycount:400});

      }
    },

    /**
     * mapGetters辅助函数仅仅是将store中的getter映射到当前vue局部计算属性
     */
    computed: {
      ...mapGetters({
        show: 'myshow',
        'show1': 'myshow'
      })
    },

  };
</script>
<style>
  #app {
    text-align: center;
  }

</style>
